<script setup lang='ts'>
import { ref, reactive, onUnmounted, onMounted, computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useMouseEvents } from '@/hooks/UserHooks.ts' //引入hooks函数
import magnifying_glass from '@/views/ZoomSize.vue'
const { handleDoubleClick, handleMouseDown, handleMouseMove, handleClick, handleMouseWheel, SaoMi, HuiCao, ShiJiao, ListoPen, activeName, TabhandleClick, input } = useMouseEvents()

</script>

<template>
    <div class="ClickEvents">
        <el-button class="el-btn" type="info" @dblclick="handleDoubleClick">鼠标双击</el-button>
        <el-button class="el-btn" type="info" @mousedown="handleMouseDown">鼠标按下</el-button>
        <el-button class="el-btn" type="info" @mousemove="handleMouseMove">鼠标移动</el-button>
        <el-button class="el-btn" type="info" @click="handleClick">鼠标单击</el-button>
        <el-button class="el-btn" type="info" @mousewheel="handleMouseWheel">鼠标滚动</el-button>
        <el-button class="el-btn" type="info" @drag="SaoMi">鼠标公式</el-button>
        <!-- <RouterLink to="/home/myw">''''</RouterLink> -->
        <div class="dh">
            <el-drawer v-model="ListoPen" direction="ltr" :width-header="false" size="50%">
                <div class="eeegg">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="TabhandleClick">
                        <el-tab-pane label="User" name="first">
                            <el-input v-model="input" style="width: 240px" placeholder="Please input" clearable
                                @keydown.enter="HuiCao" @blur="HuiCao" />
                        </el-tab-pane>
                        <el-tab-pane label="Config" name="second">
                         <magnifying_glass></magnifying_glass>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-drawer>

        </div>
    </div>
</template>

<style lang='scss' scoped>
.ClickEvents {
    margin-left: .4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .el-btn {
        width: 150px;
        height: 50px;
        margin: 3%;

    }
}

.huahua {
    width: 100%;
    height: 300px;
    border: 1px dashed #000;
    /* 1px虚线边框，颜色为黑色 */
    border-radius: 14%;
}


* {
    margin: 0;
    padding: 0;
}

</style>